<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
    <meta name="description" content="Interested in adding textures, lighting, shadows, normal maps, glowing objects, ambient occlusion, reflections, refractions, and more to your 3D game? Great! 3D Game Shaders For Beginners is a collection of shading techniques that will take your game visuals to new heights." />
    <meta property="og:title" content="3D Game Shaders For Beginners" />
    <meta property="og:description" content="Interested in adding textures, lighting, shadows, normal maps, glowing objects, ambient occlusion, reflections, refractions, and more to your 3D game? Great! 3D Game Shaders For Beginners is a collection of shading techniques that will take your game visuals to new heights." />
    <meta property="og:image" content="https://i.imgur.com/brdytrF.png" />
    <meta name="twitter:title" content="3D Game Shaders For Beginners" />
    <meta name="twitter:description" content="Interested in adding textures, lighting, shadows, normal maps, glowing objects, ambient occlusion, reflections, refractions, and more to your 3D game? Great! 3D Game Shaders For Beginners is a collection of shading techniques that will take your game visuals to new heights." />
    <meta name="twitter:image" content="https://i.imgur.com/brdytrF.png" />
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="author" content="David Lettier" />
    <title>3D Game Shaders For Beginners</title>
    <style>
      code{white-space: pre-wrap;}
      span.smallcaps{font-variant: small-caps;}
      span.underline{text-decoration: underline;}
      div.column{display: inline-block; vertical-align: top; width: 50%;}
    </style>
    <!--[if lt IE 9]>
      <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
<span>
<p align="center">

<p><img src="https://i.imgur.com/dlmGbRU.gif" alt="3D Game Shaders For Beginners" /></p>
</p>
</span>

<h1 id="3d-game-shaders-for-beginners">3D Game Shaders For Beginners</h1>
<p>Interested in adding textures, lighting, shadows, normal maps, glowing objects, ambient occlusion, reflections, refractions, and more to your 3D game? Great! Below is a collection of shading techniques that will take your game visuals to new heights. I've explained each technique in such a way that you can take what you learn here and apply/port it to whatever stack you use—be it Godot, Unity, Unreal, or something else. For the glue in between the shaders, I've chosen the fabulous Panda3D game engine and the OpenGL Shading Language (GLSL). So if that is your stack, then you'll also get the benefit of learning how to use these shading techniques with Panda3D and OpenGL specifically.</p>
<h2 id="table-of-contents">Table Of Contents</h2>
<ul>
<li><a href="setup.html">Setup</a></li>
<li><a href="building-the-demo.html">Building The Demo</a></li>
<li><a href="running-the-demo.html">Running The Demo</a></li>
<li><a href="reference-frames.html">Reference Frames</a></li>
<li><a href="glsl.html">GLSL</a></li>
<li><a href="render-to-texture.html">Render To Texture</a></li>
<li><a href="texturing.html">Texturing</a></li>
<li><a href="lighting.html">Lighting</a></li>
<li><a href="cel-shading.html">Cel Shading</a></li>
<li><a href="normal-mapping.html">Normal Mapping</a></li>
<li><a href="deferred-rendering.html">Deferred Rendering</a></li>
<li><a href="fog.html">Fog</a></li>
<li><a href="blur.html">Blur</a></li>
<li><a href="bloom.html">Bloom</a></li>
<li><a href="ssao.html">SSAO</a></li>
<li><a href="screen-space-reflection.html">Screen Space Reflection</a></li>
<li><a href="screen-space-refraction.html">Screen Space Refraction</a></li>
<li><a href="foam.html">Foam</a></li>
<li><a href="flow-mapping.html">Flow Mapping</a></li>
<li><a href="outlining.html">Outlining</a></li>
<li><a href="depth-of-field.html">Depth Of Field</a></li>
<li><a href="posterization.html">Posterization</a></li>
<li><a href="pixelization.html">Pixelization</a></li>
<li><a href="sharpen.html">Sharpen</a></li>
<li><a href="dilation.html">Dilation</a></li>
<li><a href="film-grain.html">Film Grain</a></li>
<li><a href="lookup-table.html">Lookup Table (LUT)</a></li>
<li><a href="gamma-correction.html">Gamma Correction</a></li>
</ul>
<h2 id="attributions">Attributions</h2>
<ul>
<li><a href="https://fontenddev.com/fonts/kiwi-soda/">Kiwi Soda Font</a></li>
</ul>
<h2 id="copyright">Copyright</h2>
<p>(C) 2019 David Lettier <br> <a href="https://www.lettier.com">lettier.com</a></p>
  </body>
</html>
